@import "../../style/global.scss";

$rootName: x-switch;
$iconSize: calc(#{$font-size} * 1.5);

.#{$rootName} {
  display: inline-block;
  width: calc(#{$iconSize} * 2);
  height: calc(#{$iconSize} * 1.1);
  border-radius: $font-size-large;
  cursor: pointer;
  text-align: left;
  background-color: $success-text-color;
  transition: background-color $duration;
  line-height: 1.5;

  &&-off {
    background-color: $text-color-light !important;

    .#{$rootName} {
      &-inner {
        transform: translateX(4%);
      }

      &-innerText {
        transform: translateX(15%);
      }
    }
  }

  &-inner {
    display: inline-block;
    position: relative;
    top: 5%;
    border-radius: 50%;
    background-color: $selected-text-color;
    width: $iconSize;
    height: $iconSize;
    transform: translateX(95%);
    transition: transform $duration;
    text-align: center;
  }

  &-innerText {
    display: inline-block;
    position: relative;
    top: 5%;
    transform: translateX(-115%);
    vertical-align: super;
    color: $selected-text-color;
    transition: transform $duration;
  }

  .x-icon {
    position: relative;
    vertical-align: super;
  }
}